<script>
import { ref, onMounted, onUnmounted } from 'vue';
import eventBus from '@/utils/eventBus';
import { getHistoryImages } from '@/api/camera';
import { ElMessage } from 'element-plus';

export default {
  name: 'CenterBottom',
  setup() {
    const photos = ref([]);
    const maxPhotos = 8;

    // 获取历史照片
    const fetchHistoryImages = async () => {
      try {
        console.log('开始获取历史照片...');
        const result = await getHistoryImages('AB9831171');
        console.log('获取到的历史照片数据:', result);

        if (result.code === 200 && result.data) {
          // 将历史照片添加到照片列表
          photos.value = result.data.map(item => {
            // 处理 URL，移除多余的 accessToken 参数
            let url = item.url;
            // 如果 URL 已经包含问号，说明已经有参数了
            if (url.includes('?')) {
              // 移除末尾可能存在的重复 accessToken
              url = url.split('?accessToken=')[0];
            }
            return {
              url: url,
              time: new Date(item.captureTime).toLocaleString()
            };
          });
          console.log('处理后的照片数据:', photos.value);
        } else {
          throw new Error(result.message || '获取历史照片失败');
        }
      } catch (error) {
        console.error('获取历史照片失败:', error);
        ElMessage.error(error.message || '获取历史照片失败');
      }
    };

    const addPhoto = (photoUrl) => {
      if (photos.value.length >= maxPhotos) {
        photos.value.pop();
      }
      // 处理新照片的 URL
      let url = photoUrl;
      if (url.includes('?')) {
        url = url.split('?accessToken=')[0];
      }
      // 添加新照片到列表开头
      photos.value.unshift({
        url: url,
        time: new Date().toLocaleString()
      });
    };

    // 监听新照片事件
    const handleNewPhoto = (photoUrl) => {
      addPhoto(photoUrl);
      // 每当有新照片时，重新获取历史照片列表
      fetchHistoryImages();
    };

    onMounted(() => {
      eventBus.on('new-photo', handleNewPhoto);
      // 组件加载时获取历史照片
      fetchHistoryImages();
    });

    onUnmounted(() => {
      eventBus.off('new-photo', handleNewPhoto);
    });

    return {
      photos
    };
  }
}
</script>

<template>
  <div class="center-bottom">
    <dv-border-box-8 :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
      <div class="content-wrapper">
        <div class="header">
          <div class="title-container">
            <dv-decoration3 class="decoration-left" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
            <dv-border-box-2 class="title-box" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']">
              <div class="title">实时监控截图</div>
            </dv-border-box-2>
            <dv-decoration3 class="decoration-right" :color="['#00ffd9', 'rgba(0, 255, 217, 0.3)']" />
          </div>
        </div>
        <!-- 照片展示区域 -->
        <div class="photos-container">
          <div class="photos-grid">
            <div v-for="(photo, index) in photos" 
                 :key="index" 
                 class="photo-item">
              <dv-border-box-12 class="photo-border">
                <div class="photo-wrapper">
                  <img :src="photo.url" 
                       :alt="'监控截图 ' + (index + 1)"
                       class="photo-image"
                       @error="(e) => e.target.src = '默认图片URL'"/>
                  <div class="photo-time">{{ photo.time }}</div>
                </div>
              </dv-border-box-12>
            </div>
          </div>
        </div>
      </div>
    </dv-border-box-8>
  </div>
</template>

<style scoped>
.center-bottom {
  width: 100%;
  height: 100%;
  padding: 12px;
}

.content-wrapper {
  width: 100%;
  height: 100%;
  background: rgba(0, 28, 36, 0.5);
  padding: 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

/* 照片展示区域样式 */
.photos-container {
  flex: 1;
  overflow: hidden;
  padding: 0 10px;
  margin-top: 10px;
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  height: 100%;
  overflow-y: auto;
  padding-right: 6px; /* 为滚动条留出空间 */
  max-height: calc(100vh - 280px); /* 调整最大高度，确保可以滚动 */
}

.photo-item {
  aspect-ratio: 16/9;
  width: 100%;
  max-width: 130px;
}

.photo-border {
  width: 100%;
  height: 100%;
}

.photo-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.photo-time {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 28, 36, 0.8);
  color: #00ffd9;
  font-size: 12px;
  padding: 2px 4px;
  text-align: center;
}

.photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 4px;
}

/* 自定义滚动条样式 */
.photos-grid::-webkit-scrollbar {
  width: 4px;
}

.photos-grid::-webkit-scrollbar-track {
  background: rgba(0, 255, 217, 0.1);
  border-radius: 2px;
}

.photos-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 217, 0.3);
  border-radius: 2px;
}

.photos-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 255, 217, 0.5);
}

/* 其他样式保持不变 */
.header {
  margin-bottom: 10px;
}

.title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-box {
  width: fit-content;
  height: 40px;
  padding: 0 30px;
}

.title {
  color: #00ffd9;
  font-size: 20px;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 10px;
  line-height: 40px;
  text-shadow: 0 0 10px rgba(0, 255, 217, 0.3);
}

.decoration-left,
.decoration-right {
  width: 180px;
  height: 35px;
}
</style>